<template>
  <div class="vivid-row" :style="style">
    <slot></slot>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "ViRow",
  props: {
    gutter: {
      type: Number,
      default: 0
    }
  },
  computed: {
    style() {
      const style = {
        marginLeft: '0',
        marginRight: '0'
      };
      if (this.gutter) {
        style.marginLeft = `-${this.gutter / 2}px`;
        style.marginRight = style.marginLeft;
      }
      return style;
    }
  }
});
</script>
<style lang="scss" scoped>
.vivid-row {

  &::after,
  &::before {
    display: block;
    content: "";
  }

  &::after {
    clear: both;
  }
}
</style>
